<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面换肤</title>
<link href="css/index_new.css" rel="stylesheet" type="text/css" />
<style type="text/css" id="indexSkin">
  a{color:#053E76;}
  a:hover{color:red;}
  .boder1-t{border-top:1px solid #AACCEE;}
  .boder1-tx{border-top:1px dashed #AACCEE;}
  .boder1-l{border-left:1px solid #AACCEE;}
  .boder1-r{border-right:1px solid #AACCEE;}
  .boder1-b{border-bottom:1px solid #AACCEE;}
  .boder1{border:1px solid #AACCEE;}
  .boder2-t{border-top:2px solid #6293BE;}
  .boder2-l{border-left:2px solid #6293BE;}
  .boder2-r{border-right:2px solid #6293BE;}
  .boder2-b{border-bottom:2px solid #6293BE;}
  .boder2{border:2px solid #6293BE;}
  .boder-r-w{border-right-color:#FFF;}
  .boder-b-c{border-bottom-color:#AACCEE;}
  .back-color{background-color:#F3FAFF;}
  .back-color2{background-color:#ECF7FF;}
  .back-color3{background-color:#FFF;}
  .color1{color:#07519A;}
  .color2{color:#044691;}
  .back-image{
	background-image: url(images/skin/blue_bg.png);
	background-repeat: no-repeat;
}
</style>

<script type="text/javascript" >
var index_skin0 = [
    { color1: '053E76', color2: '044691', b1Color: 'AACCEE', b2Color: '6293BE', brw: 'FFF', 
	  backColor1: 'F3FAFF', backColor2: 'ECF7FF', backColor3: 'FFF', 
	  backImage: 'images/skin/blue_bg.png' },
    { color1: '333333', color2: '333333', b1Color: 'C3DFAF', b2Color: 'C3DFAF', brw: 'FFF', 
	  backColor1: 'FBFEF3', backColor2: 'F6FEF3', backColor3: 'FFF', 
	  backImage: 'images/skin/green_bg.png' },
    { color1: '333333', color2: '333333', b1Color: 'D7B89C', b2Color: 'D7B89C', brw: 'FFF', 
	  backColor1: 'FFFCF9', backColor2: 'FDF8F4', backColor3: 'FFF', 
	  backImage: 'images/skin/orange_bg.png' },
    { color1: '333333', color2: '333333', b1Color: 'D1C0EA', b2Color: 'D1C0EA', brw: 'FFF', 
	  backColor1: 'FCFAFF', backColor2: 'F6F3FC', backColor3: 'FFF', 
	  backImage: 'images/skin/purple_bg.png' },
    { color1: '333333', color2: '333333', b1Color: 'FFE2EA', b2Color: 'FFE2EA', brw: 'FFF', 
	  backColor1: 'FFFBFC', backColor2: 'FFF4F8', backColor3: 'FFF',
	  backImage: 'images/skin/pink_bg.png' },
    { color1: '333333', color2: '333333', b1Color: '6CBB2A', b2Color: 'C3DFAF', brw: 'FFF', 
	  backColor1: 'FBFEF3', backColor2: 'F5FCEC', backColor3: 'FFF', 
	  backImage: 'images/skin/darkgreen_bg.png' }
];

var index_skin1 = [
    { color1: '053E76', color2: '044691', b1Color: 'AACCEE', b2Color: '6293BE', brw: 'FFF', 
	  backColor1: 'F3FAFF', backColor2: 'ECF7FF', backColor3: 'FFF', 
	  backImage: 'images/skin/blue_bg.png' },
    { color1: '333333', color2: '333333', b1Color: 'FFCD6D', b2Color: 'FFCD6D', brw: 'FFF', 
	  backColor1: 'FFFDEC', backColor2: 'FFFDEC', backColor3: 'FFF',
	  backImage: 'images/skin/garfieldInnerBg.jpg' },
    { color1: '333333', color2: '333333', b1Color: 'D7B89C', b2Color: 'D7B89C', brw: 'FFF',
	  backColor1: 'FDF8F4', backColor2: 'FDF8F4', backColor3: 'FFF', 
	  backImage: 'images/skin/orangepic_bg.jpg' },
    { color1: '333333', color2: '333333', b1Color: 'D1C0EA', b2Color: 'D1C0EA', brw: 'FFF',
	  backColor1: 'F6F3FC', backColor2: 'F6F3FC', backColor3: 'FFF', 
	  backImage: 'images/skin/purplepic_bg.jpg' },
    { color1: '333333', color2: '333333', b1Color: 'FFE2EA', b2Color: 'FFE2EA', brw: 'FFF', 
	  backColor1: 'FFFBFC', backColor2: 'FFF4F8', backColor3: 'FFF', 
	  backImage: 'images/skin/pinkpic_bg.jpg' },
    { color1: '333333', color2: '333333', b1Color: '6CBB2A', b2Color: '6CBB2A', brw: 'FFF', 
	  backColor1: 'F5FCEC', backColor2: 'F5FCEC', backColor3: 'FFF', 
	  backImage: 'images/skin/darkgreenpic_bg.jpg' }
];

//4
function cssValue(index_skin) {
    var css = [], i = 0;
    css[i++] = 'a{color:#' + index_skin.color1 + ';}';
    css[i++] = 'a:hover{color:red;}';
    css[i++] = '.boder1-t{border-top:1px solid #' + index_skin.b1Color + ';}';
    css[i++] = '.boder1-tx{border-top:1px dashed #' + index_skin.b1Color + ';}';
    css[i++] = '.boder1-l{border-left:1px solid #' + index_skin.b1Color + ';}';
    css[i++] = '.boder1-r{border-right:1px solid #' + index_skin.b1Color + ';}';
    css[i++] = '.boder1-b{border-bottom:1px solid #' + index_skin.b1Color + ';}';
    css[i++] = '.boder1{border:1px solid #' + index_skin.b1Color + ';}';
    css[i++] = '.boder2-t{border-top:2px solid #' + index_skin.b2Color + ';}';
    css[i++] = '.boder2-l{border-left:2px solid #' + index_skin.b2Color + ';}';
    css[i++] = '.boder2-r{border-right:2px solid #' + index_skin.b2Color + ';}';
    css[i++] = '.boder2-b{border-bottom:2px solid #' + index_skin.b2Color + ';}';
    css[i++] = '.boder2{border:2px solid #' + index_skin.b2Color + ';}';
    css[i++] = '.boder-r-w{border-right-color:#' + index_skin.brw + ';}';
    css[i++] = '.boder-b-c{border-bottom-color:#' + index_skin.b1Color + ';}';
    css[i++] = '.back-color{background-color:#' + index_skin.backColor1 + ';}';
    css[i++] = '.back-color2{background-color:#' + index_skin.backColor2 + ';}';
    css[i++] = '.back-color3{background-color:#' + index_skin.backColor3 + ';}';
    css[i++] = '.color1{color:#' + index_skin.color1 + ';}';
    css[i++] = '.color2{color:#' + index_skin.color2 + ';}';
    css[i++] = '.back-image{background-image:url(' + index_skin.backImage + ');}';
    return css.join('');
}

var skins = ['blue', 'green', 'orange', 'purple', 'pink', 'darkgreen'];
var skinCssOld = 1;
var skinCssNew = 1;
var skinCookie = 'HaoRisingCnSkin';

//2
function skinReadCookie() {
    skinCssOld = 1;
    skinCssNew = 1;
    var allcookies = document.cookie;
    if (!allcookies) return;
    var cookie_pos = allcookies.indexOf(skinCookie);
    var cookie_val = "";
    if (cookie_pos > -1) {
        cookie_pos = cookie_pos + skinCookie.length + 1;
        var cookie_end = allcookies.indexOf(";", cookie_pos);
        if (cookie_end == -1) {
            cookie_end = allcookies.length;
        }
        cookie_val = unescape(allcookies.substring(cookie_pos, cookie_end));
        skinCssOld = parseInt(cookie_val);
        skinCssNew = skinCssOld;
    }
}

//3
function includeStyleElement(styles, styleId) {
    var style = document.createElement("style");
    style.id = styleId;
    (document.getElementsByTagName("content")[0] || document.body).appendChild(style);
    if (style.styleSheet) {
        style.styleSheet.cssText = styles;
    }
    else {
        style.appendChild(document.createTextNode(styles));
    }
}

//1
function skinPageLoad() {
    skinReadCookie();
    if (skinCssOld <= 10) {
        includeStyleElement(cssValue(index_skin0[skinCssOld - 1]), "indexSkin");
        document.getElementById('skin0' + skinCssOld).className = skins[skinCssOld - 1] + 'C';
    }
    else {
        includeStyleElement(cssValue(index_skin1[skinCssOld - 11]), "indexSkin");
    }
}

function setSkinByColor(k) {
  var count = skins.length;
  for (var i = 1; i <= count; i++) {
	if (i == k) {
		document.getElementById('skin0' + i).className = skins[i - 1] + 'C';
	}
	else {
		document.getElementById('skin0' + i).className = skins[i - 1];
	}
  }
}

function skinWriteCookie(value) {
  var expiration = new Date((new Date()).getTime() + 365 * 24 * 60 * 60 * 1000);
  document.cookie = skinCookie + "=" + escape(value) + ";expires=" + expiration.toGMTString() + ";";
}

function changeSkinByColor(k) {
  var count = skins.length;
  setSkinByColor(k);
  includeStyleElement(cssValue(index_skin0[k - 1]), "indexSkin");
  skinCssNew = k;
  skinCssOld = k;
  skinWriteCookie(skinCssOld);
}
</script>

</head>

<body>

<!-- 换肤，开始 -->
<div id="skin">
  <div style="width:960px; margin:0 auto;">
    <div id="skin-left"></div>
    <div id="skin-right">
      <span class="skin clearfix">
        <a class="blue" onClick="changeSkinByColor(1);" id="skin01">
        <img alt="" id="skinImg1" src="images/k.gif" /></a>
        <a class="green" onClick="changeSkinByColor(2);" id="skin02" >
        <img alt="" id="skinImg2" src="images/k.gif" /></a> 
        <a class="orange" onClick="changeSkinByColor(3);" id="skin03">
        <img alt="" id="skinImg3" src="images/k.gif" /></a> 
        <a class="purple" onClick="changeSkinByColor(4);" id="skin04" >
        <img alt="" id="skinImg4" src="images/k.gif" /></a> 
        <a class="pink" onClick="changeSkinByColor(5);" id="skin05" >
        <img alt="" id="skinImg5" src="images/k.gif" /></a> 
        <a class="darkgreen" onClick="changeSkinByColor(6);" id="skin06" >
        <img alt="" id="skinImg6" src="images/k.gif" /></a>
      </span>
    </div>
  </div>
</div>
<div id="skinWrap" class="skin-wrap"></div>
<!-- 换肤，结束 -->

<div id="header">
  <div class="content">
      <div class="tab">
        <span class="tiaoc"></span>
        <div id="searchTab">
          <div id="searchTab2">
            <span><img id="safesearch" src="images/k.gif" width="81" height="20" /></span>
            <strong id="web_page" class="back-color boder1-t boder1-l boder1-r bStyle">网页</strong>
          </div>
        </div>
      </div>
      <div class="searchBox boder1 back-color" id="searchBox"></div>
  </div>
</div>

<script type="text/javascript">
  for (var a = 1; a <= 6; a++) {
	document.getElementById('skinImg' + a).src = 'images/icon/skin_def_110815.png';
  }
  skinPageLoad();
</script>
</body>
</html>

